 <!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:29
-->
<template>
<div class="list">
  <div class="wrapper">
        <div @click="articleHandler(iteam.id)" class="project" v-for="iteam in articles" :key="iteam.id">
          <div class="left">
            <img width="100%" :src="iteam.cover" alt="">
          </div>
          <div class="right">
            <div class="name">{{iteam.title}}</div>
            <div class="time">{{iteam.publishTime | fmtDate}}</div>
            <div class="desc">阅读次数：{{iteam.readTimes}} 点赞次数：{{iteam.thumpUp}}</div>
          </div>
      </div>
  </div>
</div>
</template>
<script lang="ts">
import { get } from '../utils/request'
export default({
  data() {
    return{
      //向后台传递的参数
      list:{
        page:1,
        pageSize:20,
        categoryId:this.$route.query.categoryId
      },
      articles:[],
    }
  },
  //帧听器
  watch:{
    '$route.query.categoryId':function(){
      this.list.categoryId=this.$route.query.categoryId;
      //刷新页面
      this.findCategoryArticles()
    }
    },
  methods:{
    //通过categoryId查询资讯信息
    findCategoryArticles(){
      get("/index/article/pageQuery",this.list).then(res=>{
        if(res.status==200){
          this.articles=res.data.list
        }else{
          this.$message({
            type: "error",
            message: 'res.message'
          })
        }
      })
    },
    articleHandler(id){
      this.$router.push({path:'/article',query:{id:id}})
    }
  },
  created(){
    this.findCategoryArticles()
  }
  })
</script>
<style scoped lang="scss">
.list{
.wrapper{
  .project{
    display: flex;
    padding:1em 0;
    border-bottom: 1px solid #f4f4f4;
    .left{
      width:300px;
      height:200px;
      overflow: hidden;
      border-radius: 5px;
    }
    .right{
      flex:1;
      padding: 0 2em ;
      .name{
        line-height:2em;
        font-weight: 600;
        font-size:15px;
      }
      .time{
        line-height:2em;
        font-size:15px;
      }
      .desc{
        line-height:2em;
      }
    }
  }
}}
</style>